<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .container {
            overflow: hidden;
            border: 2px solid;
            width: 200px;
            height: 200px;
            position: relative;
            line-height: 200px;
            text-align: center;
            font-size: 100px;
            font-family: 宋体;
        }
    </style>
</head>

<body>
    <div class="container">
        袁
    </div>
    <p>
        <button id="btnbig">放大</button>
        <button id="btnsmall">缩小</button>
    </p>

    <script>
        var btnBig = document.getElementById("btnbig"),
            btnSmall = document.getElementById("btnsmall"),
            div = document.querySelector(".container");

        btnBig.onclick = function() {
            //得到当前的字体大小
            var size = parseInt(getComputedStyle(div).fontSize);
            div.style.fontSize = size + 10 + "px";
        }

        btnSmall.onclick = function() {
            //得到当前的字体大小
            var size = parseInt(getComputedStyle(div).fontSize);
            var result = size - 10;
            if (result < 10) {
                result = 10;
            }
            div.style.fontSize = result + "px";
        }
    </script>
</body>

</html>
